<template>
  <el-container class = 'page'>
    <el-header class = 'header'>
      <h1 class="fl">
        商家后台管理系统
      </h1>
      <div class="fr">{{nick}}</div>
      <div class="headimg" @click="headomg">
        <img :src="Otu" alt=""/>
      </div>
      <el-dialog :title="test" :visible.sync="dialogVisible" width="30%">
        <p class="headp">头像</p>
        <el-form class="form" :model="form" ref="form">
          <el-form-item class="licensePic">
            <el-upload class="avatar-uploader uplod" :headers="Oimg" name="imageFile" :action="uploadUrl()"
            :show-file-list="false"
            :data='mgdata'
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.image" :src="form.image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          </el-form-item>
          <el-form-item class="nic" size="small" label="昵称：">
            <el-input placeholder="请输入昵称" v-model="form.nickname"></el-input>
          </el-form-item>
          <el-form-item class="nic" size="small" label="注册时间：">
            <span>{{form.setTime | time('-:')}}</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="save" size="small">保存</el-button>
          <el-button type="primary" @click="quits" size="small">退出</el-button>
        </div>
      </el-dialog>
    </el-header>
    <el-container>
      <el-aside width="250px" v-if = "$store.state.settled !== '' && $store.state.settled !== '0'">
        <el-menu class = 'menu' router :default-active="active" background-color="#227dcd" text-color="#fff" active-text-color="#fff">
          <el-submenu v-for = "item in menu"  :index = 'item.link' route :key = 'item.link'>
            <template slot = 'title'>
              <i :class="[item.icon]"></i>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item v-for = "it in item.chidren" :index = "it.link" :key = "it.link">
              <span slot="title">{{ it.title }}</span>
            </el-menu-item>
            <el-submenu v-for = "it in item.routeChidren" route :key = 'it.link' :index = 'it.link'>
              <template slot="title">{{ it.title }}</template>
              <el-menu-item v-for = "route in it.chidren" :key = 'route.link' :index = 'route.link'>
                {{ route.title }}
              </el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="mains">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  name: 'page',
  data () {
    return {
      test: '',
      Otu: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg',
      nick: '',
      mgdata: {
        folderType: 'member'
      },
      Oimg: {},
      dialogVisible: false,
      form: {
        image: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg',
        nickname: '',
        setTime: '2018-10-21 10:30:32'
      },
      menu: [{
        title: '商家信息',
        icon: 'el-icon-location',
        link: '/',
        childrenRoute: [{
          link: '/addapply',
          index: '/'
        }, {
          link: '/changeword',
          index: '/'
        }, {
          link: '/changetel',
          index: '/'
        }],
        chidren: [{
          link: '/',
          title: '商家基本信息'
        }, {
          link: '/auxiliary',
          title: '商家辅助信息'
        }]
      }, {
        title: '商品管理',
        icon: 'el-icon-location',
        link: '/commodity',
        routeChidren: [{
          title: '普通商品',
          link: 'comm',
          chidren: [{
            title: '发布商品',
            link: '/release'
          }, {
            title: '待提交商品',
            link: '/imSunmit'
          }, {
            title: '审核中',
            link: '/audit'
          }, {
            title: '审核驳回',
            link: '/refute'
          }, {
            title: '待上架',
            link: 'stay'
          }, {
            title: '已上架',
            link: 'stayed'
          }, {
            title: '强制下架',
            link: 'force'
          }]
        }]
      }, {
        title: '运费管理',
        icon: 'el-icon-location',
        link: '/freight',
        chidren: [{
          title: '运费模版',
          link: 'templates'
        }]
      }, {
        title: '订单管理',
        icon: 'el-icon-location',
        link: '/order',
        routeChidren: [{
          title: '普通订单',
          link: 'normal',
          chidren: [{
            link: '/sendout',
            title: '待发货'
          }, {
            link: '/takeover',
            title: '待收货'
          }, {
            link: '/allorder',
            title: '全部订单'
          }]
        }, {
          title: '秒杀订单',
          link: '/second',
          chidren: [{
            link: '/secondSendout',
            title: '待发货'
          }, {
            link: '/secondTakeover',
            title: '待收货'
          }, {
            link: '/secondAllorder',
            title: '全部订单'
          }]
        }, {
          title: '试用订单',
          link: '/try',
          chidren: [{
            link: '/trySendout',
            title: '待发货'
          }, {
            link: '/tryTakeover',
            title: '待收货'
          }, {
            link: '/tryAllorder',
            title: '全部订单'
          }]
        }, {
          title: '拼团订单',
          link: '/spel',
          chidren: [ {
            link: '/spelSendout',
            title: '拼团成功待发货订单'
          }, {
            link: '/spelTakeover',
            title: '待收货'
          }, {
            link: '/spelAllorder',
            title: '全部订单'
          }]
        }]
      }, {
        title: '售后管理',
        icon: 'el-icon-location',
        link: '/after',
        chidren: [{
          link: '/return',
          title: '退款退货订单'
        }, {
          link: '/refund',
          title: '退款订单'
        }, {
          link: '/exchange',
          title: '换货订单'
        }, {
          link: '/complete',
          title: '已退款'
        }, {
          link: '/userappeal',
          title: '已换货'
        }]
      }, {
        title: '评价管理',
        icon: 'el-icon-location',
        link: '/evaluation',
        chidren: [{
          link: '/recommended',
          title: '推荐评价'
        }, {
          link: '/all',
          title: '全部评价'
        }]
      }, {
        title: '对账管理',
        icon: 'el-icon-location',
        link: '/account',
        routeChidren: [{
          title: '商家账单',
          link: 'business',
          chidren: [{
            link: '/outaccount',
            title: '已出账单'
          }, {
            link: '/inaccount',
            title: '未出账单'
          }]
        }]
      }]
    }
  },
  computed: {
    active () {
      let obj = null
      for (let key in this.menu) {
        if (Array.isArray(this.menu[key].childrenRoute)) {
          obj = this.menu[key].childrenRoute.find(it => {
            // console.log(it.link, this.$route.path)
            return it.link === this.$route.path
          })
        }
        if (obj) break
      }
      if (obj) {
        return obj.index
      } else {
        return this.$route.path
      }
    }
  },
  created () {
    this.Oimg['x-auth-token'] = `${this.$store.state.systemId}_${this.$store.state.userId}_${this.$store.state.token}`
    this.sins()
  },
  methods: {
    uploadUrl () {
      return `${this.$config.baseUrl}/system/imageUpload`
    },
    headomg () {
      this.dialogVisible = true
      // this.init()
    },
    quits () {
      this.$tkAjax.get(`${this.$config.baseUrl}/user/merchantUser/logout`).then(res => {
        this.$message.success(res.data.message)
        this.dialogVisible = false
        this.$router.push('/login')
      }).catch(err => {
        this.$message.warning(err.data.message)
      })
    },
    handleAvatarSuccess (res, file) {
      if (res.code === '200') {
        this.form.image = this.getImgSrc(res.content)
      } else {
        this.$message.warning(res.message)
      }
    },
    beforeAvatarUpload (file) {
      const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif')
      const isLt2M = file.size / 1024 / 1024 < 2
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 1MB!')
      }
      return isJPG && isLt2M
    },
    //商家信息
    sins () {
      this.$tkAjax.get(`${this.$config.baseUrl}/user/merchantUser/getMerchantUserById?merchantUserId=` + this.$store.state.userId)
        .then(res => {
          if (res.data.content.headImage) {
            this.Otu = this.getImgSrc(res.data.content.headImage)
            this.form.image = this.getImgSrc(res.data.content.headImage)
          }
          this.test = res.data.content.userNickName
          this.nick = res.data.content.userNickName
          this.form.nickname = res.data.content.userNickName
          this.form.setTime = res.data.content.createTime
        }).catch(err => {
          this.$message.warning(err.data.message)
        })
    },
    //编辑 商家头像昵称
    save () {
      let json = {
        userId: this.$store.state.userId,
        headImage: this.setImgSrc(this.form.image),
        userNickName: this.form.nickname
      }
      this.$tkAjax.post(`${this.$config.baseUrl}/user/merchantUser/updateMerchantUserById`, {}, {
        params: {
          condition: json
        }
      }).then(res => {
        this.dialogVisible = false
        this.$message.success(res.data.content)
        this.sins()
      }).catch(err => {
        this.$message.warning(err.data.message)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.page {
  height: 100%;
  background-color: #fff;
  .mains {
    background: #EEF9FB;
  }
  .header{
    line-height: 60px;
    color: #4b4b4b;
    background-color: $--color-primary;
    color: #fff;
    .el-dialog {
      .el-dialog__footer {
        text-align: center;
      }
      .form {
        text-align: center;
        .licensePic {
          .el-form-item__content {
            .avatar-uploader-icon {
              width: 100px;
              height: 100px;
              line-height: 100px;
              border: 1px dashed #ccc;
            }
          }
          .uplod {
            .el-upload-dragger{
              width: 100px;
              line-height: 100px;
              height: 100px;
              border: 1px dashed #2D6DE7;
            }
            .avatar {
              vertical-align: middle;
              display: block;
              width: 100px;
              height: 100px;
            }
          }
        }
        .nic {
          display: flex;
          margin-top: 10px;
          padding-left: 134px;
        }
      }
      .headp {
        padding: 0 0 20px 140px;
        line-height: 0;
      }
      .oImg {
        width: 110px;
        height: 120px;
        margin: 0 auto;
        background-color: #f5f5f5;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .niname {
        padding: 30px 0 20px 140px;
        line-height: 0;
        span {
          padding-left: 10px;
        }
      }
    }
    &:after{
      content: '';
      display: block;
      clear: both;
    }
    .headimg {
      width: 40px;
      height: 40px;
      margin-top: 10px;
      float: right;
      border-radius: 50%;
      overflow: hidden;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .fl {
      font-size: 22px;
      font-family: 'PingFang-SC';
      font-weight: 549;
    }
    .fr {
      margin-left: 15px;
      margin-right: 20px;
    }
  }
  .menu{
    height: 100%;
    overflow-y: auto;
    color: #fff;
    .el-submenu {
      .el-submenu__title {
        font-size: 18px;
      }
    }
    /deep/ .el-submenu__title i{
      color:inherit;
    }
  }
}
</style>
